<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view id="container"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
		<view :golnglat=golnglat :change:golnglat="Cesium.getSetView" 
		:golnglatpitch=golnglatpitch :change:golnglatpitch="Cesium.getSetViewP" 
		:isVideoMode=isVideoMode :change:isVideoMode="Cesium.handleModeChange"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				golnglat: [],
				golnglatpitch: [],
			}
		},
		props: {
			isVideoMode: {
				type: Boolean,
				default: false
			},
		},
		mounted() {},
		methods: {
			getSetView(lng, lat, alt) {
				if (lng == 0 && lat == 0) {
					return;
				}
				this.golnglat = [lng, lat, alt]
			},
			getSetViewP(lng, lat, alt, p) {
				if (lng == 0 && lat == 0) {
					return;
				}
				this.golnglatpitch = [lng, lat, alt, p]
			},
		}
	}
</script>
<script module="Cesium" lang="renderjs">
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		mounted() {
			
			const linkDom = document.createElement('link')
			linkDom.rel = "stylesheet"
			linkDom.href = "static/Cesium/Widgets/widgets.css"
			document.head.appendChild(linkDom)
		 
			// 动态引入较大类库避免影响页面展示
			const script = document.createElement('script')
			// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
			script.src = 'static/Cesium/Cesium.js'
			script.onload = this.init.bind(this)
			document.head.appendChild(script)
		},
		methods: {
			init() {
				console.log(window.Cesium.VERSION) // APP可运行
				Cesium.Ion.defaultAccessToken =
					'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMTgxNDFhMi1mMGM5LTRhM2ItYWRlYi01ZGFkOGNhMDhiYWIiLCJpZCI6MjU1MjM1LCJpYXQiOjE3NDM1NjMzNjZ9.1JUQi3RtGD_a34Y2PTJp9hSZChjWvu2iv5CcBeU7bjs';
				this.viewer = new Cesium.Viewer('container', {
					imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
						url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
					}),
					animation: false,//是否创建动画小器件，左下角仪表
					baseLayerPicker: false,//是否显示图层选择器
					creditsDisplay: false,
					fullscreenButton : false,//是否显示全屏按钮
					geocoder : false,//是否显示geocoder小器件，右上角查询按钮
					homeButton : false,//是否显示Home按钮
					infoBox:false,//点击要素之后显示的信息,默认true
					navigationHelpButton: false,//是否显示右上角的帮助按钮
					navigation: true, // 显示导航控件
					sceneModePicker : false,//是否显示3D/2D选择器
					selectionIndicator:false,//选中元素显示,默认true
					showSelection:false,
					shouldAnimate: false,
					timeline: false,//是否显示时间轴  
					terrainProvider: Cesium.createWorldTerrain(), // 创建世界地形
				})
				this.viewer.scene.sun.show = false;
				this.viewer.scene.moon.show = false;
				this.viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
				this.viewer.scene.globe.show = true;
				// this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [];//禁止视角转动
				// this.viewer.scene.screenSpaceCameraController.enableRotate=false;
				this.viewer.scene.screenSpaceCameraController.enableTilt = true
				this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
				// // 不加载默认bing的卫星图
				// this.viewer.imageryLayers.get(0).show = false
				this.viewer.scene.fxaa = false
				this.viewer.scene.postProcessStages.fxaa.enabled = false
	
				this.viewer._cesiumWidget._supportsImageRenderingPixelated = Cesium.FeatureDetection.supportsImageRenderingPixelated();
				this.viewer._cesiumWidget._forceResize = true;
				this.viewer._cesiumWidget._creditContainer.style.display = "none"//取消版权信息
				// Cesium.RequestScheduler.maximumRequestsPerServer = 18;
				// Cesium.RequestScheduler.throttleRequests = false;
			},
			getSetView(coordinate) {
				if (!this.viewer) return;
				this.viewer.camera.setView({
					destination: Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1], coordinate[2]),
				});
			},
			getSetViewP(coordinate) {
				if (!this.viewer) return;
				const p = coordinate[3]
				var d = p >= 30 && p <= 60 ? 0.01 : p == 0 ? 0 : 0;
				this.viewer.camera.setView({
					destination: Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1] - d, coordinate[2]),
					orientation: {
						heading: Cesium.Math.toRadians(0), // 0 度偏航角
						pitch: Cesium.Math.toRadians(-p), // -45 度俯仰角，即俯视 45 度
						roll: 0 // 滚转角为 0
					}
				});
			},
			removeEntityLikeName(viewer, name) {
				if (name) {
					var cleanEntities = this.getEntityLikeName(viewer, name);
					// 清除
					cleanEntities.map((res) => {
						viewer.entities.removeById(res.id);
					});
				} else {
					// viewer.entities.removeAll();
				}
			},
			getEntityLikeName(viewer, name) {
				if (name) {
					var entities = viewer.entities.values;
					var findEntities = [];
					for (var i = 0; i < entities.length; i++) {
						var entity = entities[i];
						if (entity.name && entity.name.indexOf(name) !== -1) {
							findEntities.push(entity);
						}
					}
					return findEntities;
				} else {
					return [];
				}
			},
			handleModeChange(isVideoMode) {
				/** //互换地图和某个小窗口div的位置
				 <view class="video-herder flex flex-align-center flex-justify-between">
				 	<text class="video-title">{{isVideoMode ? '态势地图' : '视频画面'}}</text>
				 	<view class="iconfont icon-qiehuan" @tap="isVideoMode = !isVideoMode"></view>
				 </view>
				 <view class="video-content" id="videoBox">
				 	<!-- <cMap ref="cmap" id="fkmap" :isVideoMode="isVideoMode" :isPointoutStatic="isPointoutStatic"
				 	style="height: 100%;position: absolute;left: 0;bottom: 0;"></cMap> -->
				 </view>
				 
				 <view class="mapBox" id="mapBox" style="height: 100%;position: relative;">
				 	<view id="fxwbrtc" class="flex flex-align-center flex-justify-center" style="width: 100%; height: 100%;">
				 		<!-- <webrtcPage ref="livertc"></webrtcPage> -->
				 	</view>
				 </view>
				 */
				const videoBox = document.getElementById('videoBox') //视频父容器
				const video = document.getElementById('fxwbrtc') //视频容器
				const mapBox = document.getElementById('mapBox') //地图父容器
				const fkmap = document.getElementById('fkmap') //地图容器
				if (isVideoMode) {
					videoBox.appendChild(fkmap)
					mapBox.appendChild(video)
				} else {
					videoBox.appendChild(video)
					mapBox.appendChild(fkmap)
				}
			},
			test3D(){
				const entity = viewer.entities.add({
					name: "uav",
					position: position,
					orientation: orientation,
					model: {
						uri: "static/models/nav.glb",
						// minimumPixelSize: 20,
						// maximumScale: 30,
						scale:30,
						clippingPlanes: new Cesium.ClippingPlaneCollection({
							planes: [
								new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0, 1), 0)
							],
							edgeWidth: 1,
							edgeColor: Cesium.Color.RED,
							enabled: true,
							edgeMaterial: new Cesium.PolylineOutlineMaterialProperty({
								color: Cesium.Color.RED,
								outlineWidth: 1,
								outlineColor: Cesium.Color.BLACK
							}),
						})
					},
        		});
			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#container {
		width: 100%;
		height: 100%;
	}
</style>
